React Profiler API
React本家のパフォーマンス計測のためのツール
<Profiler>でwrapした内部のコンポーネント群のRendering時間を計測
<Profiler>はネストもできる
実機で使用できる
メモ化すべき箇所の指摘
Productionには残さないほうが良い
遅くなる
props
id
onRender
id
Profilerのidの名前
phase: "mount" | "update"
初回mountなのか、再描画なのかを示す
actualDuration
今回の更新でProfilerとその子孫の描画に要した時間
memo化の指標になる
理想的にはupdateのときは、mountに比べてかなり小さくなるべき
子孫要素は特定のpropsが変化したときのみ再描画されるべきなのでmrsekut.icon
baseDuration
一切のmemo化なしで描画した場合の最悪の時間を推定して表示
これとactualDurationの差を見るのかmrsekut.icon
startTime
Reachが更新の描画を開始したタイムスタンプ
commitTime
Reactが更新をコミットした時刻
描画終了のタイムスタンプ
interaction
更新がスケジュールされた（render や setState の呼び出しなどにより）際に trace された “interaction” の Set
よくわからんmrsekut.icon
例
code:ts
import React, { useEffect, Profiler, ProfilerOnRenderCallback } from 'react';
const callback: ProfilerOnRenderCallback = (
id,
phase,
actualTime,
baseTime,
startTime,
commitTime
) => {
console.log(`${id}'s ${phase} phase=====
Actual time : ${actualTime}
Base time : ${baseTime}
Start time : ${startTime}
Commit time : ${commitTime}
`);
};
const App: React.FC = () => {
return (
<App>
<Profiler id='Navigation' onRender={callback}>
<Navigation {...props} />
</Profiler>
<Main {...props} />
</App>
);
};
お気持ち
Rootに近い場所でProfiler仕込んでもあまり参考にならないmrsekut.icon
「これとこれの数値の差があるべき」というが、差がありすぎるので参考にならない
ActualとBaseが5000倍ぐらい違う
もう少し細かい単位で仕込むと良さそう
どうやって本番環境で使う？
これらの数値をどう見ればいい？
具体的にどの数値に着目し、どこから改善スべきなのかがわからない
例えば
AとBの差が開いているのは良くない
Aは100以下じゃないと良くない
など
計測できるのは、mountとupdateのみであって、ユーザーのインタラクションなどは無理？
ex. 「いいね」した
参考